﻿@page "/docs/components/grid"

<DocsPageTitle>
    Grid component
</DocsPageTitle>

<DocsPageParagraph>
    The grid system is used to help layout components with Blazorise.
    It is modelled after Bootstraps Grid system and uses a <Code>flex</Code> layout system.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Rows & Columns">
        As the grid can be divided into 12 columns, there are size classes for each division.
        These can be set using <Code>ColumnSize</Code> followed by <Code>.Is1</Code> -> <Code>.Is12</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicGridExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicGridExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Offset">
        Move columns to the right using <Code>.WithOffset</Code> attribute.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <GridOffsetExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="GridOffsetExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Gutter">
        Gutter can be used to set small spacing between <Code>Columns</Code> within a <Code>Row</Code>, without breaking the Grid
        wrapping rules (this is done by offsetting margins).
        <br />
        <br />
        You can use it by setting the <Code>Gutter</Code> attribute on the <Code>Row</Code>. The <Code>Columns</Code> will
        automatically inherit this sapcing and apply it.
        <br />
        <br />
        <Code>Gutter</Code> is a tuple, which is <Code>(int Horizontal, int Vertical)</Code> based off <Code>pixel</Code> spacing.
        <br />
        <br />
        In this example, each <Code>Column</Code> will get <Code>16px</Code> of padding left and right, as well as <Code>8px</Code>
        of padding top and bottom. The <Code>Row</Code> will offset the margin accordingly.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <GridGutterExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="GridGutterExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Containers
</DocsPageSubtitle>

<DocsPageParagraph>
    Containers can be used as an easy and helpful way to display content with some default padding and margins for a clean UI.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Container">
        This container will be centered on desktop.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicContainerExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicContainerExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Fluid Container">
        If you don’t want to have a maximum width but want to keep the some margin on the left and right sides, add the <Code>Fluid</Code> modifier:
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ContainerFluidExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ContainerFluidExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Responsive">
        Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached,
        after which we apply <Code>max-widths</Code> for each of the higher breakpoints. For example, <Code>Breakpoint.Tablet</Code>
        is 100% wide to start until the <Code>Tablet</Code> breakpoint is reached, where it will scale up
        with <Code>Desktop</Code>, <Code>Widescreen</Code>, and <Code>FullHD</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ContainerBreakpointExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ContainerBreakpointExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes Title="Row">
    <DocsAttributesItem Name="Gutter" Type="(int, int)" Default="null">
        Row grid spacing - we recommend setting Horizontal and/or Vertical it to (16 + 8n). (n stands for natural number.)
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="Column">
    <DocsAttributesItem Name="Gutter" Type="(int, int)" Default="null">
        Column grid spacing, we recommend setting it to (16 + 8n). (n stands for natural number.)
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="Container">
    <DocsAttributesItem Name="Breakpoint" Type="Breakpoint" Default="None">
        Makes a full width container that is 100% wide until the specified breakpoint is reached.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Fluid" Type="bool" Default="false">
        Makes a full width container, spanning the entire width of the viewport.
    </DocsAttributesItem>
</DocsAttributes>